<!DOCTYPE html>
<html lang="zh">
<head>
	//这个文件不能用，有错误，用newclock
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>时钟</title>
	<style>
		.clock{
			width: 400px;
			margin: 100px auto;
			background: #ddd;
			border-radius: 20px;
		}
	</style>
</head>
<body>
<div class="clock">
	<canvas id="view" width="400px" height="400px"></canvas>
</div>
<script>
	var canvas = document.getElementById('view');  //1.获取元素
	var c = canvas.getContext('2d');   //2.获取上下文对象
	
	//3.定义基础变量
	var w = h = 400;  //时钟宽高
	var x = y = 200;  //时钟中心坐标
	var r = 180;//时针长度
	var r_hour = 60;//时针长度
	var r_minute = 120;//分针长度
	var r_second = 140; //秒针长度
	var r_text = 140;//定义表盘文字的半径
	var r_square = 165;//刻度
	var r_circle = 10;// 表盘小圆点
	var deg = 2*Math.PI;//定义基本的圆周
	
	//平移中心点
	c.translate(w/2,h/2);
	
	////TODO step2:画时钟的针
	function clock(){
		//TODO step1:画表盘
		drawCircle(0,0,r,'#fff');
		
		//获取当前时间
		var data = new Date();
		var hour = data.getHours()*(deg/12) - deg/4; //[0-23]
		var miunte = date.getMinutes()*(deg/60) - deg/4;//[0-59]
		var second = date.getSeconds()*(deg/60) - deg/4;//[0-59]
		
		drawLine(0,0,r_hour*Math.cos(hour),r_hour*Math.sin(hour),'#000',10);
		drawLine(0,0,r_minute*Math.cos(miunte),r_minute*Math.sin(miunte),'#000',5);
		drawLine(0,0,r_second*Math.cos(second),r_second*Math.sin(second),'#f00',2);
		
		// drawLine(0,0,r_hour,0,'#000',10)
		// drawLine(0,0,r_minute,0,'#000',5)
		// drawLine(0,0,r_second,0,'#f00',2)
		//TODO step3:画表钉
		drawCircle(0,0,r_circle,'#000');
		
		//TODO step4:画数字
		for(var i =1; i<=12;i++){
			/*
			计算圆周坐标
			x = x+r*cos(θ)
			y = y+r*sin(θ)
			*/
		   var θ = ((Math.PI*2)/12)*i-Math.PI/2;
		   var x = r_text*Math.cos(θ);
		   var y = r_text*Math.sin(θ)
		   drawText(i,x,y);
		}
		
		//TODO step5:画刻度
		for(var i =1; i<=60;i++){
			/*
			计算圆周坐标
			x = x+r*cos(θ)
			y = y+r*sin(θ)
			
			x1,y1   x2,y2
			*/
		   var θ = ((Math.PI*2)/60)*i-Math.PI/2;
		   var x1 = r*Math.cos(θ);
		   var y1 = r*Math.sin(θ);
		   /*
		   判断是否为整点
		   */
		  if(i%5==0){
			  var x2 = r_square*Math.cos(θ);
			  var y2 = r_square*Math.sin(θ);
			  drawLine(x1,y1,x2,y2,'#f00',3)
		  }else{
			  var x2 = (r_square+4)*Math.cos(θ);
			  var y2 = (r_square+4)*Math.sin(θ);
			  drawLine(x1,y1,x2,y2,'#aaa',2)
		  }
		   
		}
	}
	
	//初始化执行一次
	clock();
	setInterval(function (){
		clock();
	},1000);
	
	
	function drawText(text,x,y){
		c.font = 'bold 26px 微软雅黑';
		c.fillStyle = "#000";
		c.textAlign = "center";
		c.textBaseline = 'middle';
		c.fillText(text,x,y);
	}
	
	
	function drawLine(x1,y1,x2,y2,color,width){
		c.beginPath();
		c.moveTo(x1,y1);
		c.lineTo(x2,y2);
		c.strokeStyle=color;
		c.lineWidth=width;
		//让指针头变圆
		c.lineCap = 'round'; //变圆
		c.stroke();
		c.closePath();
	}
	
	
	function drawCircle(x,y,r,color){
		c.beginPath();
		c.arc(x,y,r,0,Math.PI*2);
		c.fillStyle= color;
		c.fill();
		c.closePath();
	}
</script>
</body>
</html>